<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
<!--     <script type="text/javascript" src="./static/jquery-3.2.0.min.js"></script> -->
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/css/pageCommon.css" />
    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/commonUtils.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/user.js" charset="utf-8"></script>
    <script type="text/javascript">
    </script>
</head>

<body>
  <div>
    <div><span>聊天室</span>
         <button class="btn btn-warning" onclick="doClose();">退出聊天</button>
    </div>
    <div>
    	<input name="msg" id="contentInp"></input>
    	<button class="btn btn-warning" onclick="sendMsg();">发送</button>
    	<select name="receiver">
    		<option value="66">xucc</option>
    		<option value="57">薛定谔的猫</option>
    	</select>
     </div><hr/>
    <div><button class="btn btn-danger" onclick="doClear();">清空会话框</button></div>
    <div id="content">开始聊天<br/></div>
  </div>
</body>
<script type="text/javascript">
   var memberId='${memberId}';
   var id='${id}';
   var msgType='${msgType}';
   var socketId="socket_"+memberId;
   var ws = new WebSocket("ws://localhost:8082/easygo-manager-web/api/socket/"+socketId); //controller层url
   ws.onopen = function(){
       appendHtm("连接成功！");
   }
   
   function sendMsg(){
	   var msg=$("input[name='msg']").val();
	   if(msg.trim()!=""){
		   var receiver=$("select[name='receiver'] option:selected").val();
		   var htmlMsg=memberId+"|"+receiver+"|"+msg+"|"+msgType+"|"+id;
		   console.log(htmlMsg);
	       doSend(htmlMsg);
	       $("input[name='msg']").val("");
	   }
   }
   
   
   // 从服务端接收到消息，将消息回显到聊天记录区
   ws.onmessage = function(evt){
       appendHtm(evt.data);
   }
   
   ws.onerror = function(){
       appendHtm("连接失败！");
   }
   
   ws.onclose = function(){
       appendHtm("连接关闭！");
   }
   
   function appendHtm(htm){
       ($("#content")[0]).innerHTML += htm +"<br/>" 
   }
   
   // 注销登录
   function doClose(){
       ws.close();
   }
   
   // 发送消息
   function doSend(htm){
       ws.send(htm);
   }
   
   function doClear(){
       $("#content").empty();
   }
</script>
</html>